<template>
	<view class="bg-white">
		<view class="store-box">
			<view class="goods-info e-flex" v-for="(gItem, gIndex) in list" :key="gIndex">
				<radio class="e-m-r-28" v-show="isRadio" :color="AppSkin.primary" :checked="isCheck(gItem.id, 2)" @tap.stop="$emit('checkInvalid', gItem.id)" />
				<view class="status-box c-white e-font-20 text-center e-m-r-12" v-show="!isRadio">
					{{ $t('cart.失效') }}
				</view>
				<view class="right-box e-flex e-flex-items-start e-flex-1">
					<view class="e-m-r-20" style="opacity: 0.5">
						<load-image mode="aspectFill" :size="['180rpx']" :src="gItem.productSku.skuCoverImg"></load-image>
					</view>

					<view class="goods-right e-flex e-flex-items-start e-flex-between e-flex-column e-flex-1">
						<view class="goods-tlt e-m-b-10">
							<view class="e-line-2">
								{{ gItem.productSku.productName }}
							</view>
						</view>
						<view class="e-flex">
							<view class="status-box c-white e-font-20 text-center e-m-r-12" v-show="isRadio">
								{{ $t('cart.失效') }}
							</view>
							<view class="c-45">
								{{ $t('cart.商品已经卖光了') }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useInit
	} from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
const props = defineProps({
	list: Array,
	isRadio: Boolean,
	invalidCheck: Array
});

const {AppSkin} = storeToRefs(useInit())

const isCheck = (val:string) => {
			return props.invalidCheck!.includes(val);
		}
</script>

<style lang="scss" scoped>
.c-45 {
	color: #454545;
}
.store-tlt {
	padding: 34rpx 0rpx 0rpx 20rpx;
}
.goods-info {
	padding: 30rpx 24rpx 30rpx 20rpx;
}
.status-box {
	width: 60rpx;
	height: 36rpx;
	line-height: 36rpx;
	background: #000000;
	border-radius: 40rpx;
	opacity: 0.29;
}
.right-box {
	.goods-right {
		height: 180rpx;
		.goods-tlt {
			color: #9a9a9a;
			line-height: 40rpx;
			height: 80rpx;
		}
	}
}
</style>
